<!DOCTYPE html>
<html lang="en">
<head>
<script src="./js/vue.js"></script> 
<meta charset="UTF-8"> 
<title>TodoList</title> 
</head>
<style>
    
    .wa{
        width: 300px;
        height: 300px;
        border: 1px solid black;
       
    }
    .inp{
        margin-top: 10px;
       text-align: center;
    }
    ul{
        list-style: none;
    }
   
    span{
        margin-right: 20px;
    }
    .btn{
        background: rgba(0, 0, 0, 0);
        border: none;
        color: red;
        font-size: 26px;
        padding-left: 80px;
    }
</style>
<body>
  <div id="app">
      <div class="wa">
          <div class="inp">
            <input v-model="inputValue" placeholder="最多输入7个字符"/>
            <button @click=handleSubmit>提交</button>
          </div>
          <!-- ======================================= -->
          <ul>
            <todo-item 
              v-for="(item, index) in list" 
              :key="index" 
              :content="item"
              :index="index" 
              @delete="handleDelete"
            ></todo-item> 
            </ul>
      </div>
  
    
  </div>
<script>
  Vue.component('todo-item',{
    props: ['content','index'],
    //在模板中添加点击事件
    template: '<li ><span>{{index+1}}、</span>{{content}} <button class="btn"  @click=handleClick>x</button></li>',
    methods: {
      handleClick: function() {
        //点击对应条目，则触发delete方法，传回父组件，参数为对应下标index
        this.$emit('delete', this.index)
      }
    }
  })
   
  new Vue({
    el: "#app",
    data: {
      inputValue: '',
      list: []
    },
    methods: {
      //点击按钮时，触发方法：将输入框中的数据放入列表中
      handleSubmit: function() { 
        this.list.push(this.inputValue),
        this.inputValue = ''
        
      },
      //从子组件获取的参数index，在这个方法中需要写在function括号里面
      handleDelete: function(index) {
        //从对应下标位置删除一项
        this.list.splice(index, 1)
      }
    }
  })
</script>
</body>
</html>